<template>
    <view class="theme-test-page" :style="[pageStyle, themeVars]">
        <!-- 头部 -->
        <cl-header title="主题测试" :background-color="headerBgColor" :text-color="headerTextColor" />

        <!-- 内容区域 -->
        <view class="content">
            <view class="section" :style="surfaceCardStyle">
                <text class="section-title" :style="textPrimaryStyle">当前主题信息</text>
                <view class="theme-info">
                    <text class="info-item" :style="textSecondaryStyle">主题名称: {{ currentThemeConfig.name }}</text>
                    <text class="info-item" :style="textSecondaryStyle">主题描述: {{ currentThemeConfig.description }}</text>
                    <text class="info-item" :style="textSecondaryStyle">主题图标: {{ currentThemeConfig.icon }}</text>
                </view>
            </view>

            <view class="section" :style="surfaceCardStyle">
                <text class="section-title" :style="textPrimaryStyle">快速切换主题</text>
                <view class="quick-actions">
                    <button class="action-btn" @click="switchToNextTheme">下一个主题</button>
                    <button class="action-btn" @click="switchToPrevTheme">上一个主题</button>
                    <button class="action-btn" @click="resetTheme">重置主题</button>
                </view>
            </view>

            <view class="section" :style="surfaceCardStyle">
                <text class="section-title" :style="textPrimaryStyle">主题选择器</text>
                <ThemeSwitcher />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'
import { useThemeStyles } from '@/composables/useThemeStyles/index'
import ThemeSwitcher from '@/components/ThemeSwitcher.vue'

// 使用主题系统
const { currentThemeConfig, switchToNextTheme, switchToPrevTheme, resetTheme, getThemeVars } = useTheme()

// 主题CSS变量（确保在小程序/APP端内联变量可用）
const themeVars = computed(() => getThemeVars())

// 使用主题样式
const { pageStyle, surfaceCardStyle, textPrimaryStyle, textSecondaryStyle, headerBgColor, headerTextColor } = useThemeStyles()
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';

.theme-test-page {
    min-height: 100vh;
    background: var(--theme-background);
}

.content {
    padding: $spacing-lg;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
}

.section {
    background: var(--theme-surface);
    border: 1rpx solid var(--theme-border);
    border-radius: $border-radius-large;
    padding: $spacing-lg;
}

.section-title {
    display: block;
    font-size: $font-size-lg;
    font-weight: 600;
    margin-bottom: $spacing-md;
    color: var(--theme-text-primary);
}

.theme-info {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
}

.info-item {
    font-size: $font-size-md;
    color: var(--theme-text-secondary);
}

.quick-actions {
    display: flex;
    gap: $spacing-md;
    flex-wrap: wrap;
}

.action-btn {
    flex: 1;
    min-width: 200rpx;
    height: 80rpx;
    background: var(--theme-accent);
    color: var(--theme-text-primary);
    border: none;
    border-radius: $border-radius-medium;
    font-size: $font-size-md;
    font-weight: 500;
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
}
</style>
